<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 140px;
            height: 140px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float:left;
            font-size: 17px;
            font-family:Roman;
        }
        div.visible{
            display:none;
        }
    </style>
    <script type="text/javascript" src="script/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(function (){
            var $btn01 = $("#btn01");
            var $btn02 = $("#btn02");
            $btn01.click(function (){
                //这里visible不是类，是特定的
                //即选中可见的
                $("div:visible").css("background","red");
            })

            $btn02.click(function (){
                $("div:hidden").css("background","green")
                $("div:hidden").show()
            })

            //遍历隐藏的input元素的值
            $("#btn03").click(function (){
                //遍历方式一
                var $input = $("input:hidden");
                // for (var i = 0; i < $input.length; i++) {
                //     console.log("value"+(i+1)+"= "+$input[i].value)
                // }

                //遍历方式二
                $input.each(function (){
                    // console.log("value"+"= "+this.value)
                    console.log("value"+"= "+$(this).val())
                })
            })
        })
    </script>
</head>
<body>
<button id="btn01">改变可见的div元素背景颜色</button>
<button id="btn02">将不可见的div改为可见，背景色为绿色</button>
<button id="btn03">遍历隐藏的input元素的值</button>

<div id="one" class="visible">111</div>
<div id="two" class="visible">222</div>
<div id="three" class="visible">333</div>
<div id="four" class="other">333</div>

<input type="hidden" value="input111">
<input type="hidden" value="input222">
<input type="hidden" value="input333">
<input type="hidden" value="input444">
</body>
</html>